<template>
  <div>
    <Page auto-content-height>
      <FosoTable
        ref="roleTable"
        :columns="columns"
        :request-api="getRoleListData"
        toolbarbutton-name="新增类型"
      >
        <template #title>
          <text class="text-[16px]">商品类型 </text>
        </template>
        <template #extraActionButtons="{ row }">
          <!-- 商品录入按钮 -->
          <el-button link type="danger" @click="assignPermissions(row)" />
        </template>
      </FosoTable>
    </Page>
  </div>
</template>

<script setup lang="tsx">
import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { ElTag } from 'element-plus';

const roleTable = ref();
const getRoleListData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        total: 30,
        items: [
          {
            operator: '小花',
            remark: '😀',
            class: 1,
            createAt: 1_754_545_454,
            priceplus: 500,
          },
          {
            operator: '小花',
            remark: '😀',
            class: 2,
            createAt: 1_754_545_454,
            priceplus: 500,
          },
          {
            operator: '小花',
            remark: '😀',
            class: 2,
            createAt: 1_754_545_454,
            priceplus: 500,
          },
          {
            operator: '小花',
            remark: '😀',
            class: 2,
            createAt: 1_754_545_454,
            priceplus: 500,
          },
        ],
      });
    }, 500);
  });
};
// SKU、产品图、描述、成本价、类型（高仿 / Super Clone
const columns = computed(() => [
  {
    title: '类型',
    field: 'class',
    slots: {
      default: (data: any) => {
        return data.row.class === 1 ? (
          <ElTag type="success">正品直供 </ElTag>
        ) : (
          <ElTag type="danger">高仿</ElTag>
        );
      },
    },
  },
  {
    title: '操作人',
    field: 'operator',
  },
  // 创建时间
  {
    title: $t('sys.role.createTime'),
    field: 'createdAt',
    formatter: ['formatDate', 'yyyy-MM-dd'],
  },
  // 操作
  {
    title: $t('sys.role.operation'),
    minWidth: 200,
    slots: { default: 'action' },
  },
]);
</script>
